<template>
  <div style="margin: 50px 100px">
    <h2 style="margin-bottom: 20px; color: #333;">Excel 导出功能示例</h2>
    <p style="margin-bottom: 30px; color: #666;">
      点击以下按钮，体验多种类型的 Excel 文件导出功能。每个导出功能针对不同的场景设计：
    </p>
    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
      <el-button
          @click="handleExport('single')"
          type="primary">
        简单导出
      </el-button>
      <el-button
          @click="handleExport('multi')"
          type="success">
        复杂头导出
      </el-button>
      <el-button
          @click="handleExport('dynamicHead')"
          type="info">
        动态头导出
      </el-button>
      <el-button
          @click="handleExport('column')"
          type="warning">
        单元格合并导出
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  exportSingleColumn,
  exportMultiColumn,
  exportRowMerge,
  exportColumnMerge,
  dynamicHead
} from "@/api/export";

export default {
  methods: {
    /**
     * 处理导出功能，根据导出类型调用相应的接口。
     * @param {String} type 导出类型
     */
    async handleExport(type) {
      try {
        let response;
        switch (type) {
          case "single":
            response = await exportSingleColumn();
            this.downloadFile(response, "简单导出.xlsx");
            break;
          case "multi":
            response = await exportMultiColumn();
            this.downloadFile(response, "复杂头导出.xlsx");
            break;
          case "dynamicHead":
            response = await dynamicHead();
            this.downloadFile(response, "动态头导出.xlsx");
            break;
          case "column":
            response = await exportColumnMerge();
            this.downloadFile(response, "单元格合并导出.xlsx");
            break;
          default:
            console.error("未知的导出类型");
        }
      } catch (error) {
        console.error("导出失败", error);
      }
    },
    /**
     * 下载文件的方法，支持生成下载链接并触发下载
     * @param {Blob} response 文件的二进制数据
     * @param {String} fileName 文件名
     */
    downloadFile(response, fileName) {

    }
  }
};
</script>

<style scoped>
h2 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 14px;
  line-height: 1.6;
}

.el-button {
  min-width: 150px;
  font-size: 14px;
  text-align: center;
}
</style>
